<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            box-sizing: border-box;
            font-family: Arial;
            font-weight: bolder;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            background-color: black;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow: hidden;
        }

        .container {
            position: relative;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            position: relative;
            max-width: 679px;
            max-height: 679px;
            min-width: 679px;
            min-height: 679px;
            background: black;
            cursor: pointer;
            visibility: hidden;
        }

        .container__base {
            position: absolute;
            z-index: 0;
            width: 100%;
            height: 100%;
            background: #D5CEC6;
        }

        .moon {
            position: relative;
            z-index: 2;
            width: 611px;
            height: 611px;
        }

        .moon__svg {
            width: 611px;
            height: 611px;
        }

        .moon__txt {
            font-family: "MonumentExtended-Ultrabold", sans-serif;
            font-size: 103px;
            line-height: 1;
            fill: black;
            letter-spacing: 2.1px;
        }

        .moon__txt-overlay {
            fill: rgba(0, 0, 0, 0.6);
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
    <div class="container">

        <div class="moon">
            <svg class="moon__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                viewbox="0 0 611 611">
                <defs>
                    <clipPath id="clip-path" class="moon__svg-rects">
                        <rect id="top" width="611" height="72" />
                        <rect y="77" width="611" height="72" />
                        <rect y="154" width="611" height="72" />
                        <rect y="231" width="611" height="72" />
                        <rect y="308" width="611" height="72" />
                        <rect y="385" width="611" height="72" />
                        <rect y="462" width="611" height="72" />
                        <rect y="539" width="611" height="72" />
                    </clipPath>
                </defs>
                <g clip-path="url(#clip-path)">
                    <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)"
                        xlink:href="http://www.jq22.com/tp/6372184713439807959740518.jpg" />
                </g>
                <g class="moon__txt-bg" fill="#D5CEC6" transform="translate(-1 0)">
                    <rect y="229" width="612" height="76" />
                    <rect y="306" width="612" height="76" />
                    <rect y="383" width="612" height="76" />
                    <rect y="460" width="612" height="76" />
                    <rect y="537" width="612" height="76" />
                </g>
                <clipPath id="moon_txt-mask" class="moon__txt" transform="translate(-2 0)">
                    <text x="0" y="303">
                        <tspan>13</tspan>
                    </text>
                    <text x="0" y="380">
                        <tspan>MINUTES</tspan>
                    </text>
                    <text x="1" y="457">
                        <tspan>TO</tspan>
                    </text>
                    <text x="1" y="534">
                        <tspan>THE</tspan>
                    </text>
                    <text x="0" y="611">
                        <tspan>MOON</tspan>
                    </text>
                </clipPath>
                <g clip-path="url(#moon_txt-mask)">
                    <image class="moon__img" width="1024" height="1024" transform="translate(-271 -188) scale(0.98)"
                        xlink:href="http://www.jq22.com/tp/6372184713439807959740518.jpg" />
                    <rect class="moon__txt-overlay" width="611" height="611"></rect>
                </g>
            </svg>
        </div>
        <div class="container__base"></div>
    </div>

    <script>
        console.clear();

        select = e => document.querySelector(e);
        selectAll = e => document.querySelectorAll(e);

        const container = select('.container');
        let wArray = [161, 614, 189, 278, 404],
            tl;

        function animate() {
            tl = gsap.timeline({
                delay: 0.5,
                repeat: -1,
                defaults: {
                    ease: "expo.inOut",
                    duration: 2
                }
            });

            tl.from('.container__base', {
                scaleX: 0,
                duration: 2,
                transformOrigin: "top right",
                // ease: "expo"
            })

                .from('.moon__svg-rects rect', {
                    scaleX: 0,
                    stagger: 0.07,
                    duration: 3,
                    ease: "expo"
                }, "-=1.0")

                .to('.moon__txt-bg rect', {
                    stagger: 0.14,
                    scaleX: 1
                }, "-=2.5")

                .from('text', {
                    x: function (i) {
                        return -wArray[i]
                    },
                    ease: 'power4',
                    stagger: 0.14
                }, "-=1.6")

                .from('.moon__img', {
                    x: "+=200",
                    ease: 'power4',
                    duration: 15
                }, 0);
        }

        function init() {
            gsap.set(container, { autoAlpha: 1 });

            gsap.set('.moon__txt-bg rect', {
                width: function (i) {
                    return wArray[i]
                },
                scaleX: 0
            })

            animate();

            container.onclick = () => {
                tl.restart();
            }

        }

        function resize() {
            let vw = window.innerWidth;
            let vh = window.innerHeight;
            let wh = container.offsetWidth;
            let scaleFactor = 1;

            if (vw / vh >= 1) {
                scaleFactor = vh / wh
            }
            else {
                scaleFactor = vw / wh
            }

            if (scaleFactor < 1) {
                gsap.set(container, { scale: scaleFactor });
            }
            else {
                gsap.set(container, { scale: 1 });
            }
        }

        window.onresize = resize;

        window.onload = () => {
            init();
            resize();
            // GSDevTools.create();
        };
    </script>
</body>

</html>